<script setup lang="ts">
import UvVtabs from '@/uv-ui/components/uv-vtabs/components/uv-vtabs/uv-vtabs.vue'
import UvVtabsItem from '@/uv-ui/components/uv-vtabs/components/uv-vtabs-item/uv-vtabs-item.vue'

function handleClickLeft() {
  uni.navigateBack()
}
const list = [
  {
    name: '整单备注',
    childrens: [
      {
        name: 'uv-ui简介',
        desc: '1. uv-ui最初是在uview2.x的基础上进行改进优化，支持vue3等优化，最重要的是支持单独导入直接使用，无需在main.js中进行配置。\n\n2. uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。但是会在下载处进行广告配置，作为开发团队的研发费用的部分来源，所以希望大家理解。',
      },
    ],
  },
  {
    name: '撤单原因',
  },
  {
    name: '退菜原因',
    badge: {
      isDot: true,
    },
  },
  {
    name: '菜品备注',
  },
  {
    name: '免单原因',
  },
]
const value = ref(0)
function toAdd() {
  uni.navigateTo({
    url: '/pages/remark/remarkAdd',
  })
}
function change(index) {
  value.value = index
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="常用备注" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view class="flex-1">
      <uv-vtabs :chain="false" :list="list" @change="change">
        <uv-vtabs-item>
          <wd-cell-group border>
            <wd-cell title="退菜原因必填" title-width="80%" center>
              <view class="">
                <wd-switch size="20px" />
              </view>
              <template #label>
                <view class="mt-2">
                  <wd-text
                    text="开启后，在收银端进行该操作时，必须填写原因才能完成操作"
                    size="12px"
                    color="#aaa"
                  />
                </view>
              </template>
            </wd-cell>
            <wd-cell title="退菜原因支持自定义" title-width="80%" center>
              <view class="">
                <wd-switch size="20px" />
              </view>
              <template #label>
                <view class="mt-2">
                  <wd-text
                    text="开启后，既能在以下选项中选择备注内容，也能自定义备注内容"
                    size="12px"
                    color="#aaa"
                  />
                </view>
              </template>
            </wd-cell>
            <wd-cell title="退菜原因仅支持单选" title-width="80%" center>
              <view class="">
                <wd-switch size="20px" />
              </view>
              <template #label>
                <view class="mt-2">
                  <wd-text text="开启后，备注原因仅支持单选" size="12px" color="#aaa" />
                </view>
              </template>
            </wd-cell>
          </wd-cell-group>
          <view class="p-[10px] text-right">
            <wd-button type="text" size="small" @click="toAdd">添加备注</wd-button>
          </view>
          <wd-cell-group border>
            <wd-cell title="未按要求制作" is-link />
            <wd-cell title="不新鲜" is-link />
            <wd-cell title="有异物" is-link />
            <wd-cell title="上菜慢" is-link />
          </wd-cell-group>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-cell) {
  line-height: 18px;
}
:deep(.uv-vtabs__content) {
  background-color: transparent;
}
</style>
